<template>
  <div class="List_container">
    <el-row class="ipt_row">
      <el-col :span="10">
        <!-- 左侧搜索框 -->
        <el-input clearable placeholder="按工号、姓名、部门搜索" prefix-icon="el-icon-search" v-model="leftValue">
        </el-input>
      </el-col>
      <!-- 下拉菜单 -->
      <el-col :span="3" class="chooseList">
        <el-dropdown @command="handleCommand" trigger="hover">
          <el-button type="primary">
            按列表<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">按列表</el-dropdown-item>
            <el-dropdown-item command="b">按目录树</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="10">
        <!-- 右侧搜索框 -->
        <el-input v-model="rightValue" clearable placeholder="按工号、姓名、部门搜索" prefix-icon="el-icon-search">
        </el-input>
      </el-col>

    </el-row>

    <el-row class="tables">
      <!-- 左侧表格 -->
      <el-col :span="10">
        <el-table v-show="flag" type="selection" border ref="multipleTable" :data="leftTables" tooltip-effect="dark" style="width:600px" @selection-change="changeChecked">
          >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="工号" width="100" prop="deptNo">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontLeft(scope.row.deptNo)"></span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180" prop="empName">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontLeft(scope.row.empName)"></span>
            </template>
          </el-table-column>
          <el-table-column label="部门" width="180" show-overflow-tooltip prop="deptName">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontLeft(scope.row.deptName)"></span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 树形表格 -->
        <el-tree v-show="!flag" :default-checked-keys="defKeys" @check-change="changeTree" ref="tree" :data="treeList" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :props="defaultProps">
        </el-tree>
      </el-col>

      <el-col :span="10" class="right_list">
        <!-- 右侧表格 -->
        <el-table :key="keyQuery" :data="rightTables" style="width: 100%">
          <el-table-column prop="deptNo" label="工号" width="50">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontRight(scope.row.deptNo)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="empName" label="姓名" width="120">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontRight(scope.row.empName)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="部门" width="180">
            <template slot-scope="scope">
              <span class="col-cont" v-html="showFontRight(scope.row.deptName)"></span>
            </template>
          </el-table-column>
          <el-table-column label="删除">
            <template slot-scope="scope">
              <el-button @click="deleteUser(scope.row.id)" type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-col>

    </el-row>

    <el-button @click="getJson" class="res" type="primary">取选择结果</el-button>

    <el-dialog :visible.sync="dialogVisible" width="50%">
      {{chooseList}}
    </el-dialog>
  </div>

</template>

<script>

export default {
  data () {
    return {
      // 左侧列表渲染数据
      listLeft: [
        { id: 1, empName: '张一', deptNo: '001', deptName: '财务部门' },
        { id: 2, empName: '张二', deptNo: '002', deptName: '财务部门' },
        { id: 3, empName: '张三', deptNo: '003', deptName: '财务部门' },
        { id: 4, empName: '李一', deptNo: '004', deptName: '研发部门' },
        { id: 5, empName: '李二', deptNo: '005', deptName: '研发部门' },
        { id: 6, empName: '王一', deptNo: '006', deptName: '销售部门' },
        { id: 7, empName: '王二', deptNo: '007', deptName: '销售部门' }
      ],

      // 树形列表
      treeList: [{
        id: 10,
        label: '全公司',
        children: [{
          id: 11,
          label: '财务部',
          children: [{
            id: 1,
            label: '张一',
            empName: '张一',
            deptNo: '001',
            deptName: '财务部门'
          }, {
            id: 2,
            label: '张二',
            empName: '张二',
            deptNo: '002',
            deptName: '财务部门'
          }, {
            id: 3,
            label: '张三',
            empName: '张三',
            deptNo: '003',
            deptName: '财务部门'
          }]
        }, {
          id: 12,
          label: '研发部',
          children: [{
            id: 4,
            label: '李一',
            empName: '李一',
            deptNo: '004',
            deptName: '研发部门'
          }, {
            id: 5,
            label: '李二',
            empName: '李二',
            deptNo: '005',
            deptName: '研发部门'
          }]
        }, {
          id: 13,
          label: '销售部',
          children: [{
            id: 6,
            label: '王一',
            empName: '王一',
            deptNo: '006',
            deptName: '销售部门'
          }, {
            id: 7,
            label: '王二',
            empName: '王二',
            deptNo: '007',
            deptName: '销售部门'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 默认选中的节点数组
      defKeys: [],
      // 左侧搜索框数据
      leftValue: '',
      // 右侧搜索框数据
      rightValue: '',
      // 选中的列表
      chooseList: [],
      keyQuery: 1,
      // 控制显示隐藏
      flag: true,
      dialogVisible: false,
    }
  },
  computed: {
    // 监听表格
    leftTables () {
      var leftValue = this.leftValue
      if (leftValue) {
        return this.listLeft.filter(item => {
          return Object.keys(item).some(key => {
            return String(item[key]).indexOf(leftValue) > -1
          })
        })
      }
      return this.listLeft
    },

    rightTables () {
      var rightValue = this.rightValue
      if (rightValue) {
        return this.chooseList.filter(item => {
          return Object.keys(item).some(key => {
            return String(item[key]).indexOf(rightValue) > -1
          })
        })
      }
      return this.chooseList
    },
  },
  methods: {

    // 当表格选择框发生改变的时候
    changeChecked (val) {

      this.chooseList = val
      var chooseId = []
      this.chooseList.forEach(item => {
        chooseId.push(item.id)
      })
      this.defKeys = chooseId
      this.$refs.tree.setCheckedNodes(this.defKeys)
    },

    //  鼠标点击删除事件
    deleteUser (id) {
      var index = this.chooseList.findIndex(item => {
        return item.id === id
      })
      this.chooseList.splice(index, 1)
      this.listLeft.forEach(item => {
        if (item.id === id) {
          this.$refs.multipleTable.toggleRowSelection(item, false)
        }
      })
      this.$refs.tree.setChecked(id, false)
    },

    // 树形选择框改变的时候
    changeTree (v1, v2) {
      if (v2 === false) {
        var index = this.chooseList.findIndex(item => {
          return item.id === v1.id
        })
        this.chooseList.splice(index, 1)
        this.listLeft.forEach(item => {
          if (item.id === v1.id) {
            this.$refs.multipleTable.toggleRowSelection(item, false)
          }
        })
      }
      var keys = this.$refs.tree.getCheckedKeys(true)
      var trees = this.listLeft.filter(item => {
        return keys.indexOf(item.id) !== -1 && this.chooseList.indexOf(item) === -1
      })
      trees.forEach(item => {
        this.chooseList.push(item)
        this.$refs.multipleTable.toggleRowSelection(item, true)
      })
    },
    // 点击下拉菜单项
    handleCommand (command) {
      if (command === 'a') {
        this.flag = true
      } else {
        this.flag = false
      }
    },

    getJson () {
      this.dialogVisible = true
    },

    // 关键字高亮
    showFontLeft (val) {
      val = val + '';
      if (val.indexOf(this.leftValue) !== -1 && this.leftValue !== '') {
        return val.replace(this.leftValue, '<font color="#E93EFF">' + this.leftValue + '</font>')
      } else {
        return val
      }
    },

    showFontRight (val) {
      val = val + '';
      if (val.indexOf(this.rightValue) !== -1 && this.rightValue !== '') {
        return val.replace(this.rightValue, '<font color="#E93EFF">' + this.rightValue + '</font>')
      } else {
        return val
      }
    }
  }
}
</script>

<style scoped>
.List_container {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.chooseList {
  margin-left: 50px;
}
.right_list {
  position: absolute;
  right: 0;
}
.res {
  position: absolute;
  right: 0;
  margin-top: 30px;
}
.tables {
  margin-top: 10px;
}
</style>
